<template>
  <div class="home-page">
    <!-- 顶部搜索栏 -->
    <div class="search-bar">
      <!-- <van-search
        v-model="searchValue"
        shape="round"
        background="#4e54c8"
        placeholder="搜索冷库编号、样品名称或订单号"
        @search="onSearch"
      >
        <template #left>
          <div class="location">
            <van-icon name="location" color="#fff" size="18" />
            <span @click="selectLocation">{{ currentLocation || '请选择冷库位置' }}</span>
          </div>
        </template>
      </van-search> -->
      <div class="home-title">食安科技自助下单管理系统</div>
    </div>

    <!-- 快捷功能入口 -->
    <div class="quick-access">
      <van-grid :border="false" :column-num="4">
        <van-grid-item
          v-for="(item, index) in quickActions"
          :key="index"
          :text="item.text"
          :icon="item.icon"
          @click="goToModule(item.path)"
        />
      </van-grid>
    </div>

    <!-- 广告横幅轮播 -->
    <div class="banner-section">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#4e54c8">
        <van-swipe-item
          v-for="(banner, index) in banners"
          :key="index"
          @click="viewPromotion(banner.id)"
        >
          <img :src="banner.image" alt="促销活动" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 待办事项提醒 -->
    <div class="todo-section" v-if="pendingTasks.length > 0">
      <div class="section-header">
        <van-icon name="warning" color="#ee0a24" size="18" />
        <h3>待办事项 ({{ pendingTasks.length }})</h3>
      </div>
      <div class="task-list">
        <div
          v-for="(task, index) in pendingTasks"
          :key="index"
          class="task-item"
          @click="handleTask(task)"
        >
          <div class="task-info">
            <span class="task-title">{{ task.title }}</span>
            <span class="task-time">{{ task.time }}</span>
          </div>
          <div class="task-badge">
            <van-tag type="danger" v-if="task.type === 'urgent'">紧急</van-tag>
            <van-tag type="primary" v-else-if="task.type === 'pending'">待处理</van-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <tabbar active="home" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import Tabbar from '../components/Tabbar.vue'

// 类型定义
interface BannerItem {
  id: number
  image: string
  title: string
  url: string
}

interface TaskItem {
  id: number
  title: string
  time: string
  path: string
  type: 'urgent' | 'pending' | 'normal'
}

interface QuickAction {
  text: string
  icon: string
  path: string
}

export default defineComponent({
  name: 'HomeIndex',
  components: {
    Tabbar,
  },
  setup() {
    const router = useRouter()

    // 搜索值
    const searchValue = ref('')

    // 当前选择的冷库位置
    const currentLocation = ref('上海1号冷冻中心')

    // 待办事项列表
    const pendingTasks = ref<TaskItem[]>([
      {
        id: 1,
        title: '待支付样品检测订单',
        time: '今天 14:30',
        path: '/payment/DD20230925001',
        type: 'urgent',
      },
      {
        id: 2,
        title: '货物温度异常告警',
        time: '今天 10:15',
        path: '/monitoring',
        type: 'urgent',
      },
      {
        id: 3,
        title: '完成2号仓库的取样任务',
        time: '今天 17:00',
        path: '/tasks',
        type: 'pending',
      },
    ])

    // 轮播图数据
    const banners = ref<BannerItem[]>([
      {
        id: 1,
        image:
          'https://img.ixintu.com/upload/jpg/20210527/cb385714cd1d10073fd7ecc738a385e5_92238_800_323.jpg%21con',
        title: '新用户专享礼包',
        url: '/promotions/1',
      },
      {
        id: 2,
        image:
          'https://fastly.picsum.photos/id/103/2592/1936.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ',
        title: '样品检测8折优惠',
        url: '/promotions/2',
      },
      {
        id: 3,
        image:
          'https://bpic.51yuansu.com/pic3/cover/01/39/13/5926f01d548df_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100',
        title: '冷库租赁限时特惠',
        url: '/promotions/3',
      },
    ])

    // 快捷功能入口
    const quickActions = ref<QuickAction[]>([
      { text: '自助下单', icon: 'todo-list-o', path: '/order' },
      { text: '取样任务', icon: 'cluster-o', path: '/tasks' },
      { text: '订单管理', icon: 'orders-o', path: '/order-list' },
      { text: '余额查询', icon: 'balance-o', path: '/user' },
    ])

    // 搜索处理
    const onSearch = () => {
      if (!searchValue.value.trim()) {
        Toast('请输入搜索内容')
        return
      }
      router.push({
        path: '/search',
        query: { q: searchValue.value },
      })
    }

    // 选择冷库位置
    const selectLocation = () => {
      // 模拟选择位置
      Toast('选择位置')
    }

    // 跳转到指定模块
    const goToModule = (path: string) => {
      router.push(path)
    }

    // 查看促销活动
    const viewPromotion = (id: number) => {
      router.push(`/promotion/${id}`)
    }

    // 处理待办任务
    const handleTask = (task: TaskItem) => {
      router.push(task.path)
    }

    return {
      searchValue,
      currentLocation,
      pendingTasks,
      banners,
      quickActions,
      onSearch,
      selectLocation,
      goToModule,
      viewPromotion,
      handleTask,
    }
  },
})
</script>

<style lang="scss" scoped>
.home-page {
  padding-bottom: 60px; // 为底部导航栏留出空间
  background-color: #f7f8fa;

  .search-bar {
    background: linear-gradient(to right, #4e54c8, #8f94fb);
    // padding: 10px 12px 15px;
    padding: 15px;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 60px;
    .home-title {
      display: flex;
      align-items: center;
      color: #ffffff;
      flex-direction: column;
      font-size: 18px;
      font-weight: bold;
    }

    .van-search {
      padding: 0;
    }

    .location {
      display: flex;
      align-items: center;
      color: white;
      font-size: 14px;
      font-weight: 500;
      padding-right: 10px;
      cursor: pointer;

      span {
        margin-left: 5px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .quick-access {
    margin-top: 50px;
    padding: 10px 0;
    background: white;

    :deep(.van-grid-item) {
      &:hover {
        transform: translateY(-3px);
        transition: transform 0.3s ease;
      }
    }

    .van-icon {
      font-size: 26px;
      color: #4e54c8;
      margin-bottom: 8px;
    }
  }

  .banner-section {
    margin: 12px 15px;
    border-radius: 10px;
    overflow: hidden;

    .my-swipe {
      height: 140px;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .todo-section,
  .service-section {
    margin: 15px;
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f1f1f1;

      h3 {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-left: 8px;
      }
    }

    .task-list {
      .task-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f7f8fa;
        cursor: pointer;

        &:last-child {
          border-bottom: none;
        }

        .task-info {
          flex: 1;

          .task-title {
            display: block;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
            color: #333;
          }

          .task-time {
            font-size: 12px;
            color: #969799;
          }
        }

        .task-badge {
          .van-tag {
            font-size: 11px;
            padding: 0 8px;
            height: 18px;
            line-height: 18px;
            border-radius: 9px;
          }
        }
      }
    }
  }

  .service-section {
    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px;
      padding-top: 5px;

      .service-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .service-icon {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 8px;
          transition: all 0.3s ease;

          &:hover {
            transform: scale(1.1);
          }
        }

        .service-name {
          font-size: 12px;
          color: #333;
          text-align: center;
        }
      }
    }
  }
}

@media (max-width: 375px) {
  .home-page {
    .service-section .service-grid {
      grid-gap: 15px;
    }
  }
}
</style>
